import React, { useEffect, useState } from 'react';
import { Spin } from 'antd';
import styles from '../index.less';

export default ({ randomNumber, changeCodeImage }) => {
  const [imageLoading, setImageLoading] = useState(true);

  useEffect(() => {
    setImageLoading(true);
  }, [randomNumber]);

  return (
    <div className={styles.validateImage} onClick={changeCodeImage}>
      <Spin spinning={!!imageLoading} size="small" tip={'加载..'} />
      <img
        alt="验证码"
        src={`/api/system/kaptcha/renderArithmeticCaptchaCode/${randomNumber}`}
        onLoad={() => setImageLoading(false)}
        onError={() => setImageLoading(false)}
      />
    </div>
  );
};
